<template>
  <Modal v-model="visible" width="840" class="source-model">
      <div class="source-menu">
        <h1>图形库</h1>
        <ul>
          <li class="active">
            单色图形
          </li>
          <li>最近上传</li>
          <li>
            多色图形
          </li>
        </ul>
      </div>
      <div class="source-content">
        <Tabs value="name1">
            <TabPane label="全部" name="name1">
              <div class="source-list">
                <div class="source-item" v-for="i in 20" @click="handlerAddImg">
                  <img src="http://oihdlfeky.bkt.clouddn.com/17-4-12/76284943-file_1491990447624_fe9a.png" alt="">
                </div>
              </div>
            </TabPane>
            <TabPane label="元素" name="name2">标签二的内容</TabPane>
            <TabPane label="背景" name="name4">标签三的内容</TabPane>
            <TabPane label="文字" name="name5">标签三的内容</TabPane>
            <TabPane label="边框" name="name3">标签三的内容</TabPane>
        </Tabs>
      </div>
    <div slot="footer"></div>
  </Modal>
</template>

<script>
import { Vue, Component, Watch, Model, Emit} from 'vue-property-decorator'
import ModalSync from "@/mixins/ModalSync"
import {
  State,
  Getter,
  Action
} from 'vuex-class'
@Component({
  mixins: [ModalSync]
})
export default class SourceImg extends Vue {
  @Action actAddElement
  visible=false
  handlerAddImg ():void {
    let newElement = {
      type: "svg",
      extra: {
        colors: [],
        svg: `<svg class="shape" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" preserveAspectRatio="none meet" width="100%" height="100%" x="0" y="0" opacity="1" stroke="#000" stroke-width="0" stroke-dasharray="none" viewBox="0 0 100 100"><path d="M55,30.9c0,2.8-2.3,5-5,5c-2.8,0-5-2.2-5-5c0-2.8,2.3-5,5-5C52.7,25.8,55,28.1,55,30.9z M49.6,36.3
	c-7,0-11.8,4-11.8,7.2c0,0,0,1.5,0,1.5v9.8c0,1.2,0.9,2.2,2.1,2.2c1.2,0,2.1-1,2.1-2.2V44.3c0-0.2,0.2-0.4,0.4-0.4
	c0.2,0,0.4,0.2,0.4,0.4V73c0,1.4,1.3,2.5,2.8,2.5c1.5,0,2.8-1.1,2.8-2.5V61.6c0-0.2,0.1-0.5,0.3-0.5h2.7c0.2,0,0.4,0.3,0.4,0.5V73
	c0,1.4,1.2,2.5,2.7,2.5c1.5,0,2.7-1.1,2.7-2.5l0-14.5l0-14.2c0-0.2,0.1-0.4,0.3-0.4c0.2,0,0.3,0.2,0.3,0.4v10.5
	c0,1.2,0.9,2.2,2.1,2.2c1.2,0,2.1-1,2.1-2.2c0,0,0-11,0-11.1C61.9,40.5,56.6,36.3,49.6,36.3z" fill="#34B8C4"></path><path d="M32.2,53.4v5.1H0V41.5h32.2v5l4.2,3.4L32.2,53.4z M68.2,53.4v5.1H100V41.5H68.2v5L64.1,50L68.2,53.4z" fill="#BDC3C7"></path><path d="M31.8,72.6v4.9H0V61h31.8v4.7l4.2,3.4L31.8,72.6z M68.2,72.5v5.1H100V60.6H68.2v5L64.1,69L68.2,72.5z" fill="#F15A47"></path><path d="M32.2,34.2V39H0V22.5h32.2v4.9l4.2,3.4L32.2,34.2z M68.2,34.2V39H100V22.5H68.2v4.9l-4.2,3.4L68.2,34.2z" fill="#F1C40F"></path></svg>`
      }

    }
    this.actAddElement(newElement)
    this.visible = false
  }
}

</script>
<style lang="less" scoped>
.source-img-model{

}
</style>
